<template>
    <div class="r-container" style="height: 100%">
        <!-- 功能描述 -->
        <div class="hand">
            <div class="hand-title">
                <h2>
                    <icon name="resume"></icon>
                    简历库
                </h2>
            </div>
            <div class="breadcrumb">
                <i class="moe-icon moe-icon-map-marker"></i>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{path: '/'}">我的控制台</el-breadcrumb-item>
                    <el-breadcrumb-item>个人管理</el-breadcrumb-item>
                    <el-breadcrumb-item>简历库</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!-- 内容容器 -->
        <div class="container">
            <div class="block block-rounded">
                <div class="block-content">
                    <!-- 选项 -->
                    <div class="block-option">
                        <el-row>
                            <el-col :span="8">
                                <el-input v-model="search.keyword"
                                          size="medium"
                                          class="input-with-select"
                                          placeholder="姓名/手机号"
                                          clearable
                                          @keyup.enter.native="handleSearch">
                                    <el-select v-model="search.type"
                                               slot="prepend"
                                               placeholder="不限"
                                               style="width: 90px;">
                                        <el-option label="不限" value=""></el-option>
                                        <el-option label="姓名" value="name"></el-option>
                                        <el-option label="手机号" value="mobile"></el-option>
                                        <el-option label="ID" value="id"></el-option>
                                    </el-select>
                                    <el-button slot="append"
                                               icon="el-icon-search"
                                               :loading="search.loading"
                                               @click="handleSearch">搜索
                                    </el-button>
                                </el-input>
                            </el-col>
                            <el-col :span="16" class="text-right">
                                <el-button-group class="ml-20">
                                    <el-button type="primary"
                                               size="medium"
                                               icon="el-icon-refresh"
                                               :loading="operate.loading"
                                               @click="handleReload">重新载入
                                    </el-button>
                                    <el-button type="primary"
                                               size="medium"
                                               :disabled="!(ids.length > 0)"
                                               @click="handleAuditResume(ids, 1)">
                                        <icon name="audit"></icon>
                                        <span>审核</span></el-button>
                                    <el-button type="primary"
                                               size="medium"
                                               :disabled="!(ids.length > 0)"
                                               @click="handleAuditAvatar(ids, 1)">
                                        <icon name="audit"></icon>
                                        <span>审核头像</span></el-button>
                                </el-button-group>
                            </el-col>
                        </el-row>
                        <div class="mt-10">
                            <el-select v-model="pickerDate.typeValue"
                                       clearable
                                       placeholder="类型"
                                       size="medium"
                                       class="mr-10"
                                       style="width: 80px;">
                                <el-option v-for="item in pickerDate.typeOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                            <el-select v-model="pickerDate.dateTypeValue"
                                       clearable
                                       size="medium"
                                       placeholder="日期"
                                       class="mr-10"
                                       style="width: 80px;"
                                       :disabled="isEmpty(pickerDate.typeValue)">
                                <el-option v-for="item in pickerDate.dateTypeOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                            <el-date-picker range-separator="-"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            size="medium"
                                            class="mr-10"
                                            clearable
                                            v-model="pickerDate.dateValue"
                                            :type="pickerDate.dateTypeValue || 'daterange'"
                                            :picker-options="pickerDate.dateOptions"
                                            :disabled="isEmpty(pickerDate.typeValue) || isEmpty(pickerDate.dateTypeValue)">
                            </el-date-picker>
                        </div>
                        <div class="r-flex mt-10">
                            <div class="r-flex__item">
                                <el-select v-model="params.sex"
                                           placeholder="性别"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 80px;"
                                           @change="handleQuery()">
                                    <el-option label="男" :value="1"></el-option>
                                    <el-option label="女" :value="2"></el-option>
                                </el-select>
                                <el-select v-model="params.age"
                                           placeholder="年龄"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 110px;"
                                           @change="handleQuery()">
                                    <el-option v-for="item in ageOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                                <el-select v-model="params.work_year"
                                           placeholder="工作经验"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 130px;"
                                           @change="handleQuery()">
                                    <el-option v-for="item in workYearOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                                <el-select v-model="params.education"
                                           placeholder="学历"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 80px;"
                                           @change="handleQuery()">
                                    <el-option v-for="item in educationOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                                <el-select v-model="params.job_status"
                                           placeholder="求职"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 130px;"
                                           @change="handleQuery()">
                                    <el-option v-for="item in jobStatusOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                                <el-select v-model="params.privacy"
                                           placeholder="隐私"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 90px;"
                                           @change="handleQuery()">
                                    <el-option label="公开" :value="1"></el-option>
                                    <el-option label="不公开" :value="2"></el-option>
                                    <el-option label="保密" :value="3"></el-option>
                                </el-select>
                                <el-select v-model="params.resume_status"
                                           placeholder="简历审核状态"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 135px;"
                                           @change="handleQuery()">
                                    <el-option label="待审核" :value="0"></el-option>
                                    <el-option label="已审核" :value="1"></el-option>
                                    <el-option label="不公开" :value="2"></el-option>
                                    <el-option label="保密" :value="3"></el-option>
                                    <el-option label="删除" :value="4"></el-option>
                                </el-select>
                                <el-select v-model="params.avatar_audit"
                                           placeholder="头像审核状态"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 135px;"
                                           @change="handleQuery()">
                                    <el-option label="待审核" :value="0"></el-option>
                                    <el-option label="已审核" :value="1"></el-option>
                                </el-select>
                            </div>
                            <div>
                                <strong class="font-s16 text-bold">结果：{{ total || 0 }}</strong>
                            </div>
                        </div>
                    </div>
                    <!-- 列表 -->
                    <el-table ref="dataList"
                              row-key="id"
                              size="medium"
                              highlight-current-row
                              :stripe="true"
                              :data="resumes"
                              :empty-text="table.emptyText"
                              v-loading="table.loading"
                              :element-loading-text="table.loadText"
                              :element-loading-background="table.backgroundColor"
                              @selection-change="handleSelectionChange">
                        <el-table-column fixed type="selection" width="42" align="center"></el-table-column>
                        <el-table-column label="ID" fixed="left" prop="id" width="70">
                            <template slot-scope="item">
                                <strong class="text-black">{{ item.row.id }}</strong>
                            </template>
                        </el-table-column>
                        <el-table-column label="账户" width="120" :show-overflow-tooltip="true">
                            <template slot-scope="item">
                                <div class="text-hide"
                                     :class="{'text-info-light': !item.row.user.account}">{{ item.row.user.account || '无' }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="姓名" prop="name" width="80">
                            <template slot-scope="item">
                                <el-link target="_blank"
                                         type="primary"
                                         :underline="false"
                                         :href="item.row.link_url">{{ item.row.name || '无' }}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column label="手机号码" prop="mobile" width="120">
                            <template slot-scope="item">
                                <span :class="{'text-info-light': !item.row.mobile}">{{ item.row.mobile || '无' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="性别" prop="sex_label" width="60"></el-table-column>
                        <el-table-column label="头像" width="60" align="center">
                            <template slot-scope="item">
                                <el-image class="image-avatar image-avatar--32"
                                          fit="cover"
                                          :src="item.row.avatar ? item.row.avatar_url : ''"
                                          :preview-src-list="[item.row.avatar_url]">
                                    <div slot="error">
                                        <icon name="pic"></icon>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column label="完整度" prop="email" width="100" align="center">
                            <template slot-scope="item">
                                <el-progress :text-inside="true"
                                             status="success"
                                             :stroke-width="14"
                                             :percentage="70"></el-progress>
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" width="160">
                            <template slot-scope="item">
                                <span :class="{'text-info-light': !item.row.created_at}">
                                    {{ item.row.created_at || '无' }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="更新时间" width="160">
                            <template slot-scope="item">
                                <span :class="{'text-info-light': !item.row.updated_at}">
                                    {{ item.row.updated_at || '无' }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" width="70" align="center">
                            <template slot-scope="item">
                                <el-tooltip effect="dark"
                                            placement="top"
                                            :content="item.row.work_status.label">
                                    <el-tag size="small"
                                            :type="item.row.work_status.style"
                                            :disable-transitions="true">
                                        {{ item.row.work_status.label_simple }}
                                    </el-tag>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column label="隐私">
                            <template slot-scope="item">
                                <el-tag size="small"
                                        :type="item.row.privacy_status.style"
                                        :disable-transitions="true">
                                    {{ item.row.privacy_status.label_simple }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="审核" fixed="right" width="70" align="center">
                            <template slot-scope="item">
                                <el-tag size="small"
                                        effect="dark"
                                        :type="item.row.audit_status.style">
                                    {{ item.row.audit_status.label_simple }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="155">
                            <template slot="header">
                                操作
                                <el-popover placement="left" trigger="hover">
                                    <div>
                                        <div><el-tag size="mini"><icon name="view"></icon></el-tag> 查看详情</div>
                                        <div class="mt-5"><el-tag size="mini"><icon name="audit"></icon></el-tag> 审核简历</div>
                                        <div class="mt-5"><el-tag size="mini"><icon name="cancel-audit"></icon></el-tag> 设定待审简历</div>
                                        <div class="mt-5"><el-tag size="mini"><icon name="cancel-audit"></icon></el-tag> 查看用户</div>
                                        <div class="mt-5"><el-tag size="mini"><icon name="dot-3"></icon></el-tag> 更多操作</div>
                                    </div>
                                    <icon slot="reference" name="ask-fill" class="text-info-light"></icon>
                                </el-popover>
                            </template>
                            <template slot-scope="item">
                                <div class="r-flex">
                                    <div class="r-flex__item">
                                        <el-button-group class="r-button-group">
                                            <el-button size="medium"
                                                       @click="dialogResumeShow(item.row.id, item.$index)">
                                                <icon name="view"></icon>
                                            </el-button>
                                            <el-button size="medium"
                                                       @click="handleAuditResume(item.row, item.$index)">
                                                <icon :name="item.row.audit_status.value === 0 ? 'audit' : 'cancel-audit'"
                                                      :class="{'text-success': item.row.audit_status.value === 0}"></icon>
                                            </el-button>
                                            <el-button size="medium"
                                                       @click="dialogPersonalUserShow(item.row.uid)">
                                                <icon name="user"></icon>
                                            </el-button>
                                        </el-button-group>
                                    </div>
                                    <el-dropdown trigger="click">
                                        <el-button size="medium" style="padding: 7px 8px;">
                                            <icon name="dot-3"></icon>
                                        </el-button>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item command="send">
                                                <icon name="resume-send"></icon>查看投递
                                            </el-dropdown-item>
                                            <el-dropdown-item command="interview">
                                                <icon name="interview"></icon>查看面试
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 页码 -->
                    <div class="block-pagination text-center">
                        <el-pagination :total="total"
                                       :page-sizes="pagination.pageSizes"
                                       :page-size.sync="table.perPage"
                                       :current-page.sync="table.currentPage"
                                       @current-change="getQuery({per_page: table.perPage, page: table.currentPage})"
                                       background
                                       layout="sizes, prev, pager, next, jumper"></el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </div>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { namespace } from 'vuex-class'

import AuthBoxMixin from '@/mixins/cms/auth'
import baseMixin from '@/mixins/base'
import FunctionMixin from '@/mixins/function'
import PickerDateMixin from '@/mixins/picker-date'
import OptionsMixin from '@/mixins/options'
import PersonalMixin from '@/mixins/personal'

import { dateFormat, errorMessage, successMessage } from '@/utils'

const module = namespace('cms/resume')

import ResumeShow from '@/views/cms/personal/resume/Show.vue'
import PersonalUserShow from '@/views/cms/personal/personal-user/Show.vue'
import PersonalResumeSend from '@/views/cms/personal/resume-send/PersonalResumeSend.vue'
import ResumeReceiveInterview from '@/views/cms/company/interview/PersonalResumeReceiveInterview.vue'

@Component({
  components: {
    ResumeShow,
    PersonalUserShow,
    PersonalResumeSend,
    ResumeReceiveInterview
  }
})

export default class Index extends mixins(AuthBoxMixin, baseMixin, FunctionMixin, PickerDateMixin, OptionsMixin, PersonalMixin) {
  // Vuex
  @module.State resumes!: Array<any>
  @module.State total!: number
  @module.Action index!: (payload: any) => Promise<any>
  @module.Action query!: (payload: any) => Promise<any>
  // @module.Action show!: (payload: any) => Promise<any>
  @module.Action destroy!: (payload: any) => Promise<any>
  @module.Action auditResume!: (payload: any) => Promise<any>
  @module.Action auditAvatar!: (payload: any) => Promise<any>

  // 操作
  private operate: any = {
    loading: false,
    avatarVisible: false
  }

  /*----- 钩子 -----*/
  public created() {
    if (!this.resumes.length) {
      this.getIndex()
    }
  }

  /**
   * 获取首页
   *
   * @return {Promise<any>}
   */
  private getIndex(): Promise<any> {
    this.table.loading = true
    return this.index({}).then((res) => {
      this.table.loading = false

      if (res.data.total === 0) {
        this.table.emptyText = '暂无数据'
      }

      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 获取查询
   *
   * @param {any} params
   * @return Promise<any>
   */
  private getQuery(params: any): Promise<any> {
    this.setParam(params)
    this.table.loading = true
    return this.query({ params: this.params }).then((res) => {
      this.table.loading = false
      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 处理搜索
   *
   * @return {void}
   */
  private handleSearch(): void {
    const params = {
      keyword: this.search.keyword,
      keyword_type: this.search.type,
      page: 1
    }
    this.search.loading = true
    this.getQuery(params).then(res => {
      this.search.loading = false
    })
  }

  /**
   * 重新载入
   *
   * @return {void}
   */
  private handleReload(): void {
    this.params = {}
    this.pickerDate.typeValue = 'register'
    this.pickerDate.dateTypeValue = 'daterange'
    this.pickerDate.dateValue = ''
    this.operate.loading = true
    this.getIndex().then((res) => {
      this.operate.loading = false
    }).catch((err) => {
      this.operate.loading = false
    })
  }

  /**
   * 处理时间查询
   *
   * @return {void}
   */
  private handleChangeDate(): void {
    if (this.pickerDate.dateValue) {
      const type_value = this.pickerDate.typeValue,
        date_type_value = this.pickerDate.dateTypeValue,
        start_date = dateFormat('yyyy-MM-dd', this.pickerDate.dateValue[0]),
        end_ate = dateFormat('yyyy-MM-dd', this.pickerDate.dateValue[1])
      this.getQuery({ type_value, date_type_value, start_date, end_ate })
    }
  }

  /**
   * 处理查询
   *
   * @return {Promise<any>}
   */
  private handleQuery(): Promise<any> {
    this.table.loading = true
    return this.query({ params: this.params }).then((res) => {
      this.table.loading = false
      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 处理审核简历
   *
   * @param {Array} ids
   * @param {Number} value
   * @return {void}
   */
  private handleAuditResume(ids: Array<number>, value: number): void {
    this.$confirm(value === 0 ? '确定设定待审吗？' : '确定审核该简历？', '审核提示', {
      type: 'warning'
    }).then(() => {
      this.table.loading = true
      this.auditResume({
        // ids: [item.row.id],
        // index: item.$index,
        params: { ids, status: value }
      }).then((res) => {
        if (res.status === 200) {
          this.cancelSelection()  // 取消选择
          successMessage(res.message)
        } else {
          errorMessage(res.message)
        }
        this.table.loading = false
      }).catch((err) => {
        this.table.loading = false
      })
    }).catch(() => {})
  }

  /**
   * 处理审核头像
   *
   * @param {Array} ids
   * @param {Number} value
   * @return {void}
   */
  private handleAuditAvatar(ids: Array<number>, value: number): void {
    this.$confirm(value === 0 ? '确定设定待状态吗？' : '确定审核头像吗？', '审核提示', {
      type: 'warning'
    }).then(() => {
      this.table.loading = true
      this.auditAvatar({
        params: { ids, avatar_audit: value }
      }).then((res) => {
        if (res.status === 200) {
          this.cancelSelection()  // 取消选择
          successMessage(res.message)
        } else {
          errorMessage(res.message)
        }
        this.table.loading = false
      }).catch((err) => {
        this.table.loading = false
      })
    }).catch(() => {})
  }

  /**
   * 取消选择
   *
   * @return {void}
   */
  protected cancelSelection(): void {
    (this.$refs.dataList as any).clearSelection()
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/view/image';
@import '~@/styles/element/element-variables';

// 头像
.avatar {
    position: relative;
    overflow: hidden;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    //&-danger {
    //    box-shadow: 0 0 0 2px $--color-danger;
    //}

    &-img {
        position: relative;
        width: 36px;
        height: 36px;
        font-weight: bold;
        line-height: 36px;
    }

    // 审核状态
    &-audit {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 50%;

        &--not {
            color: rgba(#fff, .5);
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            line-height: 36px;
            background-color: rgba($--color-danger, .8);
        }
    }

    &-round {
        //border: 2px solid #fff;
        border-radius: $--border-radius-base;
        box-shadow: 0 0 10px rgba(#000, .2);
    }
}
</style>
